<template>
  <div class="mod-config">
      <el-form inline v-show="searchShow" ref="searchForm" @keyup.enter.native="searchChange()">
        <el-form-item label="年龄年份" prop="ageYear">
          <el-input v-model="dataForm.ageYear" placeholder="年龄年份"></el-input>
        </el-form-item>
        <el-form-item label="年龄月份" prop="ageMonth">
          <el-input v-model="dataForm.ageMonth" placeholder="年龄月份"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="dataForm.gender" placeholder="请选择">
            <el-option label="男" :value="0"></el-option>
            <el-option label="女" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
          <el-button type="default" icon="el-icon-delete" @click="searchReset">清空</el-button>
        </el-form-item>

      </el-form>
      <el-row>
        <el-col :span="24">
          <el-button icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button icon="el-icon-search" circle @click="handleSearchShow" style="float:right;"></el-button>
          <el-button icon="el-icon-refresh" circle @click="refreshChange" style="float:right;"></el-button>
        </el-col>
      </el-row>
      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading">
          <el-table-column prop="ageYear" label="年龄年份"></el-table-column>
          <el-table-column prop="ageMonth" label="年龄月份"></el-table-column>
          <el-table-column prop="weight0" label="体重-3SD"></el-table-column>
          <el-table-column prop="weight1" label="体重-2SD"></el-table-column>
          <el-table-column prop="weight2" label="体重-1SD"></el-table-column>
          <el-table-column prop="weight3" label="体重均值"></el-table-column>
          <el-table-column prop="weight4" label="体重1SD"></el-table-column>
          <el-table-column prop="weight5" label="体重2SD"></el-table-column>
          <el-table-column prop="weight6" label="体重3SD"></el-table-column>
          <el-table-column prop="height0" label="身高-3SD"></el-table-column>
          <el-table-column prop="height1" label="身高-2SD"></el-table-column>
          <el-table-column prop="height2" label="身高-1SD"></el-table-column>
          <el-table-column prop="height3" label="身高均值"></el-table-column>
          <el-table-column prop="height4" label="身高1SD"></el-table-column>
          <el-table-column prop="height5" label="身高2SD"></el-table-column>
          <el-table-column prop="height6" label="身高3SD"></el-table-column>
          <el-table-column prop="gender" label="性别">
            <template slot-scope="scope">
              <span v-if="scope.row.gender == '0'">男</span>
              <span v-if="scope.row.gender == '1'">女</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="	创建时间">
</el-table-column>
          <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="修改时间">
</el-table-column>
          <el-table-column
        prop="createUser"
        header-align="center"
        align="center"
        label="创建用户id">
</el-table-column>
          <el-table-column
        prop="updateUser"
        header-align="center"
        align="center"
        label="	修改用户id">
</el-table-column>
          <el-table-column
        prop="unitId"
        header-align="center"
        align="center"
        label="单位id">
</el-table-column>
          <el-table-column
        prop="tenantId"
        header-align="center"
        align="center"
        label="	租户id">
</el-table-column> -->
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button v-if="permissions.pvm_childrenage_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
              <el-button v-if="permissions.pvm_childrenage_del" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[12, 24, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    </basic-container>
  </div>
</template>

<script>
import {fetchChildrenAgeList, delChildrenAgeObj} from '@/api/pvm/childrenage'
import TableForm from './childrenage-form'
import {mapGetters} from 'vuex'
export default {
  data () {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      searchShow:true,
      pageIndex: 1,
      pageSize: 12,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    TableForm
  },
  created () {
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      fetchChildrenAgeList(Object.assign(this.dataForm,{
        current: this.pageIndex,
        size: this.pageSize
      })).then(response => {
        if(response.data.code == '0'){
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        }else{
          this.$message.error(response.data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delChildrenAgeObj(id)
      }).then(response => {
        if(response.data.code == '0'){
          this.$message.success('删除成功')
          this.getDataList()
        }else{
          this.$message.error(response.data.msg)
        }
      })
    },
    searchChange() {
      this.pageIndex=1;
      this.getDataList()
    },
    // 搜索清空
    searchReset () {
      this.$refs.searchForm.resetFields();
      this.getDataList(this.page)
    },
    handleSearchShow () {
      this.searchShow = !this.searchShow;
    },
    // 刷新回调
    refreshChange() {
      this.getDataList(this.page)
    }
  }
}
</script>
